<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link="/system/backUser/add"
    add-btn-link-text="添加后台用户"
    :selection="false"
    :table-operation="tableOperation"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'sumloginnum'" :class="row[item.prop] > 0 ? 'text-blue-600' : 'text-green-400'">
          {{ row[item.prop] }}
        </span> 
        <span v-if="item.prop == 'accountstatus'">
          <el-tag v-if="row[item.prop] == 1" class="ml-2" type="success">有效</el-tag>
          <el-tag v-else class="ml-2" type="danger">无效</el-tag>
        </span>
      </div>
    </template>
  </g-table-page>
  <!-- 修改密码 -->
  <g-dialog
    v-model:dialog-visible="dialogVisible"
    title="修改密码"
    width="650px"
    save-btn-text="提交"
    :click-sure-btn="onSaveBtnClick"
    >
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="formRules"
        label-position="right"
        label-width="140px"
        inline
      >
        <el-form-item label="密码：" prop="loginpassword">
          <el-input
            v-model="formData.backUserId"
            type="hidden"
          />
          <el-input
            v-model="formData.loginpassword"
            type="password"
            placeholder="请输入密码"
            class="edit-item"
            clearable
          />
        </el-form-item>
      </el-form>
  </g-dialog>
</template>

<script setup lang="ts">
import { computed, toRefs, ref, reactive } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { updateBackMenuApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import elv from '@/utils/elValidation'
import md5 from 'md5'
import { updateBackUserApi } from '@/api/system'

const ruleForm = ref<FormInstance>()
let formData = ref(<
    {
      backUserId: string | number
      loginpassword: string
    }
  >{
    backUserId: 0,
    loginpassword: ''
  })
const formRules = reactive<FormRules>({
  loginpassword: [{ required: true, validator: elv.isPwd(), trigger: 'change' }],
})
const storeModelName = 'backUserModule'
const dialogVisible = ref(false)
const tableOperation = {
  width: 120,
  fixed: 'right',
  buttonGroups: [
    ({ row }) => {
      return {
        name: '编辑',
        isShow: true,
        click: ({ row }) => {
          router.push({
            path: '/system/backUser/edit',
            query: { id: row.backUserId }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: '修改密码',
        type: 'danger',
        isShow: row.accountstatus == 1,
        click: ({ row }) => {
          dialogVisible.value = true;
          formData.value.backUserId = row.backUserId;
        }
      }
    }
  ]
}

const tableHeadListSlotName = computed(() => {
  const tableHeadList = store.state[storeModelName].tableHeadList
  return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
// 修改密码
const onSaveBtnClick = (loading: Loading) => {
  ruleForm.value?.validate((valid) => {
    if (valid) {
      loading(true)
      updateBackUserApi({backUserId: formData.value.backUserId, loginpassword: md5(formData.value.loginpassword)}).then((res) => {
        // console.log('res---update', res);
        if(res*1 === 200){
          ElMessage.success('编辑成功')
          dialogVisible.value = false
        }
      })
    } else {
      return false
    }
  })
}
</script>
